<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加载-动画过渡-ZPCode UI Kits</title>
  <link rel="stylesheet" href="http://zx4.com:8001/kits/css/zpcode.min.css">
  <link rel="stylesheet" href="../statics/css/index.css">
  <link rel="stylesheet" href="../statics/highlight/styles/github-dark.min.css">
  <!--zpcode.min.js-->
  <script src="http://zx4.com:8001/kits/webcomponents/ZPElement.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/animate/loading/text.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/animate/loading/circle.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/animate/loading/greytrans.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/animate/loading/doublebead.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/animate/loading/soundleap.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/search/style01.js" type="module" defer></script>
  <!--zpcode.min.js-->
  <script src="../statics/webcomponents/layout/leftnav.js" type="module" defer></script>
  <script src="../statics/webcomponents/layout/footer.js" type="module" defer></script>
  <script src="../statics/js/animate/loading.js" type="module" defer></script>
  <script src="../statics/js/extra.js" type="module" defer></script>
</head>
<body class="dark">
  <div class="mih12p f">
    <left-nav current="loading"></left-nav>
    <div class="fa bl1" style="width:0">
      <div class="c ma mt48 pb48">
        <h1>加载</h1>
        <hr>
        <p>在HTML中，加载效果主要指的是在页面元素（如图片、视频、JavaScript文件等）被加载时，用户会在浏览器中看到一种视觉效果。这种效果通常用于改善用户体验，让用户知道页面正在加载，甚至显示加载的进度，避免用户因为无反馈而产生等待焦虑。</p>

        <hr class="mb36">
        <h2 id="justtext"># 纯文本</h2>
        <div>👇加载效果示例：</div>
        <div class="quote f fw txtc">
          <div class="f1"><al-text></al-text></div>
          <div class="f1"><al-text text="加载中"></al-text></div>
        </div>
        <div>👇HTML：</div>
        <pre class="pr"><code class="hljs language-xml justtext-html-m"></code></pre>
        <p>默认显示文本为Loading，<code>text</code>属性可以自定义加载文本。</p>

        <hr class="mt48 mb36">
        <h2 id="alcircle"># 圆圈旋转</h2>
        <div>👇加载效果示例：</div>
        <div class="quote f ja fw lh8 fs20">
          <al-circle></al-circle>
          <al-circle type="groove"></al-circle>
          <al-circle color="#0095ff"></al-circle>
          <al-circle color="#0095ff" type="groove"></al-circle>
          <al-circle type="step"></al-circle>
        </div>
        <div>👇HTML：</div>
        <pre class="pr"><code class="hljs language-xml al-circle-html-m"></code></pre>
        <p>
          <code>color</code>属性可以自定义加载圆圈的颜色，第一个颜色值为主颜色，第二个颜色值为凹槽颜色；<br>
          <code>type="groove"</code>属性可以定义加载圆圈是否具有凹槽效果；<br>
          <code>type="step"</code>属性可以定义加载圆圈是否断点，设置该值时，<code>type="groove"</code>将自动生效。
        </p>
        <p>另外，自定义颜色可以通过 CSS 变量进行穿透，这在主题高度自由变换的情况下非常有用，第一个颜色变量为<code>--al-circle-primary-color</code>，第二个为<code>--al-circle-groove-color</code>。</p>

        <hr class="mt48 mb36">
        <h2 id="algreytrans"># 灰色过渡</h2>
        <p>灰色过渡效果，最适用于图片加载前的效果展示。注意的是，该组件仅提供效果，并不解决图片懒加载逻辑，推荐用LOGO图片用于预加载效果展示。</p>
        <p>👇加载效果示例：</p>
        <div class="quote f ja fw lh8 fs30">
          <al-greytrans src="../statics/img/avatar/1.png" opacity=".1"></al-greytrans>
          <al-greytrans src="../statics/img/avatar/1.png"></al-greytrans>
          <al-greytrans src="../statics/img/avatar/1.png" opacity=".1" grayscale=".5"></al-greytrans>
        </div>
        <div>👇HTML：</div>
        <pre class="pr"><code class="hljs language-xml al-greytrans-html-m"></code></pre>
        <p>
          <code>opacity</code>属性可以自定义置底图片灰度，值为0~1，默认为0.5；<br>
          <code>grayscale</code>属性可以定义置顶图片灰度，值为0~1，默认为0（图片为彩色）。
        </p>

        <hr class="mt48 mb36">
        <h2 id="doublebead"># 双龙戏珠</h2>
        <p>👇加载效果示例：</p>
        <div class="quote f ac ja p20" style="line-height:1">
          <al-doublebead></al-doublebead>
          <al-doublebead color="blue,red"></al-doublebead>
          <al-doublebead color="#999,#999"></al-doublebead>
        </div>
        <div>👇HTML：</div>
        <pre class="pr"><code class="hljs language-xml al-doublebead-html-m"></code></pre>
        <p>
          <code>color</code>属性可以自定义颜色，格式为<code>color1,color2</code>。
        </p>
        <p>另外，自定义颜色可以通过 CSS 变量进行穿透，这在主题高度自由变换的情况下非常有用，第一个颜色变量为<code>--al-doublebead-color1</code>，第二个为<code>--al-doublebead-color2</code>。</p>

        <hr class="mt48 mb36">
        <h2 id="soundleap"># 跳跃的音律</h2>
        <p>👇加载效果示例：</p>
        <div class="quote f ac ja p20" style="line-height:1">
          <div class="f1 f ac jc"><al-soundleap></al-soundleap></div>
          <div class="f1 f ac jc"><al-soundleap color="#0095ff"></al-soundleap></div>
        </div>
        <div>👇HTML：</div>
        <pre class="pr"><code class="hljs language-xml al-soundleap-html-m"></code></pre>
        <p>
          <code>color</code>属性可以自定义颜色。另外，自定义颜色可以通过 CSS 变量进行穿透，这在主题高度自由变换的情况下非常有用，css 颜色变量为<code>--al-soundleap-color</code>。
        </p>

        <hr class="mt48 mb36">
        <h2 id="more"># 扩展</h2>
        <p>在所有加载组件中，如果想改变加载效果的大小，可以在组件外层包裹一层标签，然后赋予<code>font-size</code>样式修饰即可。</p>
        <p>同时，为保证加载效果的完整性，请保持组件的外围标签<code>line-height</code>始终为<code>1</code>，否则可能出现错位等意外预期。</p>
        <div class="quote f ac p20" style="line-height:1">
          <div class="f1 f ac jc">
            <al-text class="fs12"></al-text>
            <span class="ml12 fs18"><al-text></al-text></span>
          </div>
          <div class="f1 f ac jc">
            <al-circle type="groove"></al-circle>
            <span class="ml24 fs24"><al-circle type="groove"></al-circle></span>
          </div>
          <div class="f1 f ac jc">
            <al-doublebead class="fs12"></al-doublebead>
            <span class="ml24 fs30"><al-doublebead></al-doublebead></span>
          </div>
        </div>
        <pre class="pr"><code class="hljs language-xml al-more-html"></code></pre>

      </div>
      <zp-footer></zp-footer>
    </div>
    <div class="w200">
      <ul class="bl1 p0 mt48 pl24 ps t48 lh30">
        <li><a href="#justtext" class="txt-con txt-p-h">纯文本</a></li>
        <li><a href="#alcircle" class="txt-con txt-p-h">圆圈旋转</a></li>
        <li><a href="#algreytrans" class="txt-con txt-p-h">灰色过渡</a></li>
        <li><a href="#doublebead" class="txt-con txt-p-h">双龙戏珠</a></li>
        <li><a href="#soundleap" class="txt-con txt-p-h">跳跃的音律</a></li>
        <li><a href="#more" class="txt-con txt-p-h">扩展</a></li>
        <li class="mt12"><a href="#" class="txt-cg txt-b-h fs12">▲ 顶部</a></li>
      </ul>
    </div>
  </div>
  <script src="../statics/highlight/highlight.min.js"></script>
  <script src="../statics/highlight/languages/xml.min.js"></script>
  <script src="../statics/highlight/languages/css.min.js"></script>
</body>
</html>